<template>
  <ele-modal
    class="el-model-class"
    :show-close="false"
    width="800px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    @close="updateVisible(false)"
  >
    <iframe
      width="100%"
      style="height: 60vh; width: 100%; border: none"
      :src="map_src"
    ></iframe>
    <template slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button @click="handleSureMap" type="primary">确定</el-button>
    </template>
  </ele-modal>
</template>

<script>
  export default {
    name: 'position',
    data() {
      return {
        visible: false,

        //修改11
        map_src:
          'https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&key=D4FBZ-TGQ6J-I2HFZ-FVHIT-VLIH7-Z6BZS&referer=location',
        form: {
          //省市区ID
          id_area: [0, 0, 0],
          address: '',
          lng: '',
          lat: ''
        },
        map_data: {
          url: 'https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&key=这里放你使用的key&referer=location',
          address: '',
          lng: '',
          lat: ''
        }
      };
    },
    created() {
      let that = this;
      window.addEventListener(
        'message',
        function (event) {
          // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
          var loc = event.data;
          console.log(loc);
          if (loc && loc.module == 'locationPicker') {
            //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
            that.map_data.address = loc.poiaddress;
            that.map_data.lat = loc.latlng.lat;
            that.map_data.lng = loc.latlng.lng;
            that.$emit('chooseMapPoint', that.map_data);
          } else {
            that.$emit('chooseMapPoint', '选择数据为空');
          }
        },
        false
      );
    },
    methods: {
      //地图选点确定
      handleSureMap() {
        console.log('this.map_data', this.map_data);
        this.$emit('sure', this.map_data);
        this.updateVisible(false);
      },
      // 取消
      handleCancelMap() {
        this.$emit('cancel');
      },

      show() {
        console.log('进入位置show=======');
        this.visible = true;
      },
      /* 更新 visible */
      updateVisible(value) {
        this.visible = value;
        this.isSuccess = false;
        this.isError = false;
        this.codeImg = '';
      }
    }
  };
</script>

<style scoped></style>
